<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="sass/index.css">
<body>
    <!-- 头部 -->
    <header>
        <div class="header_left">
            <img src="/img/logo.png" alt="">
            <div>
                北京
                <div>
                    <ul>
                        <li>北京</li>
                        <li>上海</li>
                        <li>深圳</li>
                        <li>杭州</li>
                        <li>南京</li>
                        <li>成都</li>
                        <li>武汉</li>
                        <li>广州</li>
                        <li>天津</li>
                        <li>苏州</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header_right">
            <ul>
                <li>首页</li>
                <li>租房</li>
                <li>自如寓</li>
                <li>自如驿</li>
                <li>服务</li>
                <li>生活</li>
                <li>加入我们</li>
                <li>APP下载
                    <div></div>
                    <div>
                        <img src="img/erweima.png" alt="">
                        <div>扫码下载APP</div>
                    </div>
                </li>
            </ul>
            <div>成为房东</div>
            <div>
                <a href="">登录</a>
                <a href="">注册</a>
            </div>
        </div>
    </header>
    <!-- banner -->
    <section class="banner">
        <div>
            <h1>品质租房选自如</h1>
            <h2>8年，9城，近50万业主、300万自如客的选择</h2>
            <div class="bottom">
                <div>
                    <span>全部</span>
                    <span>合租</span>
                    <span>整租</span>
                </div>
                <div></div>
                <div>
                    <input type="text" placeholder="请输入区域、地铁站、小区名开始找房">
                    <div>地图找房<div></div></div>
                    <div>开始找房<div></div></div>       
                </div>
            </div>
        </div>
        <div></div>
    </section>
    <!-- 功能 -->
    <section class="function">
        <ul>
            <li>
                <div>
                    <div>
                        <img src="img/right_icon_01.png" alt="">
                    </div>
                    <div>
                        <h2>租房</h2>
                        <h3>合租/整租</h3>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <div>
                        <img src="img/right_icon_01.png" alt="">
                    </div>
                    <div>
                        <h2>服务</h2>
                        <h3>保洁/搬家/维修</h3>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <div>
                        <img src="img/right_icon_01.png" alt="">
                    </div>
                    <div>
                        <h2>生活</h2>
                        <h3>自如生活社区/自如全屋智能</h3>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <div>
                        <img src="img/right_icon_01.png" alt="">
                    </div>
                    <div>
                        <h2>租房</h2>
                        <h3>合租/整租</h3>
                    </div>
                </div>
            </li>

        </ul>
        <div>
            <div>
                <img src="img/title_bg1.png" alt="">
                <h2>优质租住环境</h2>
                <img src="img/title_bg2.png" alt="">
            </div>
            <h3>/带来全新环保体验/</h3>
        </div>
    </section>
    <!-- 深呼吸 -->
    <section class="breathe">
        <div>
            <img src="img/section_01_title.png" alt=""> 
            <ul>
                <li>优于国标E1级板材</li>
                <li>环保认证装修材料</li>
                <li>41道关键工序</li>
                <li>空气密闭检测</li>
                <li>空置30天入住</li>
            </ul>>
            <img src="img/videoplay.png" alt="">
            <div>查看视频</div>
        </div>
        <div>
            <div>
                <img src="img/title_bg1.png" alt="">
                <h2>全面租住服务</h2>
                <img src="img/title_bg2.png" alt="">
            </div>
            <h3>/简化日常繁琐生活/</h3>
        </div>
    </section>
    <!-- 租住服务 -->
    <section class="fuwu">
        <div class="header">
            <ul>
                <li>
                    <span>01</span>
                    <h3>自如保洁</h3>
                </li>
                <li>
                    <span>02</span>
                    <h3>自如搬家</h3>
                </li>
                <li>
                    <span>03</span>
                    <h3>自如家修</h3>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="left">
                <img src="img/img_ziroom.png" alt="">
                <div>
                    <h2>自如保洁</h2>
                    <div>下一刻，明亮如新</div>
                    <div>
                        自如旗下专业保洁品牌，成立八年至今，形成专属清洁服务标准——人员严选、工具放心、流程规范。为用户提供日常保洁、玻璃清洁等多样保洁产品，持续为市场提供高品质保洁服务。
                    </div>
                </div>
            </div>
            <div class="right">
                <img src="img/slider01.jpg" alt="">
            </div>
        </div>

    </section>
    <!-- 活动 -->
    <section class="active">
        <div>
            <div>
                <img src="img/title_bg1.png" alt="">
                <h2>丰富租住体验</h2>
                <img src="img/title_bg2.png" alt="">
            </div>
            <h3>/聚合有趣青年玩转城市生活/</h3>
        </div>
        <ul>
            <li>
                <img src="img/ctn-01.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-02.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-03.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-04.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-05.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-06.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-07.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-08.jpg" alt="">
            </li>          
            <li>
                <img src="img/ctn-09.jpg" alt="">
            </li>
            <li>
                <img src="img/ctn-10.jpg" alt="">
            </li>
            
        </ul>

    </section>
</html>